<template>
  <div ref="printContent" class="container">
    <index-head></index-head>
    <div class="main clearfix">
      <div class="breadcrumb_mainBody_tab_tilte">
        <index-breadcrumb></index-breadcrumb>
        <div class="mainBody_tab_tilte_parent">
          <ul class="mainBody_tab_tilte clearfix">

            <li @click="stateGraph" :class="{ active: cur == 0 }">
              <img src="../assets/image/mainCon_icon5.png" />
              <span>图表 /</span>
              <img src="../assets/image/mainCon_icon6.png" />
              <span>报表</span>
            </li>
            <!-- <li @click="statement" :class="{ active: cur == 1 }">
              <img src="../assets/mainCon_icon6.png" />
              <span>报表</span>
            </li>
            <li @click="graph" :class="{ active: cur == 2 }">
              <img src="../assets/mainCon_icon5.png" />
              <span>图表</span>
            </li> -->
            <!--<li class="macro_shu"></li>-->
            <li @click="analysis">
              <img src="../assets/image/mainCon_icon7.png" />
              <span>分析</span>
            </li>
            <li @click="predict">
              <img src="../assets/image/mainCon_icon8.png" />
              <span>预测</span>
            </li>
            <li @click="statistical">
              <img src="../assets/image/mainCon_icon9.png" />
              <span>统计</span>
            </li>
            <!-- <li :class="{ active: cur == 7 }" @click="
                () => {
                  graphShow = false;
                  cur = 7;
                }
              " v-if="isVisibleAreaTab">
              <img src="../assets/image/mainCon_icon9.png" />
              <span>数据地图</span>
            </li> -->
            <!--<li class="macro_shu"></li>-->
            <!-- <li @click="sysannouncementVisible = true">
              <img src="../assets/image/mainCon_icon1.png" />
              <span>收藏</span>
            </li> -->

            <!--<el-dialog title="收藏" :visible.sync="sysannouncementVisible" class="predictWin">
              <el-input v-model="sysannouncementTitle" placeholder="请输入收藏标题" style="background: #000;"></el-input>
              <div slot="footer" class="dialog-footer">
                <el-button @click="sysannouncementVisible = false">取 消</el-button>
                <el-button type="primary" @click="sysannouncementSave">确 定</el-button>
              </div>
            </el-dialog>-->

            <li @click="output">
              <img src="../assets/image/mainCon_icon2.png" />
              <span>导出</span>
            </li>
            <li @click="print">
              <img src="../assets/image/mainCon_icon3.png" />
              <span>打印</span>
            </li>
            <li @click="downloadImpByChart">
              <img src="../assets/image/mainCon_icon4.png" />
              <span>保存</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="mainPositionWin" v-show="mainPositionWinShow">
        <div class="positionTitle">
          <div class="clearfix">
            <p class="positionTitle_a">条件</p>
            <p class="positionTitle_close" @click="conditionsClose">
              <img src="../assets/image/close.png" />
            </p>
            <p class="positionTitle_clear" @click="conditionsClear">清空</p>
            <p class="positionTitle_extract" @click="termSubmit">数据提取</p>
          </div>
          <div class="navCntBox clearfix">
            <div class="getIndexBox">
              <span class="titleYellow">指标</span>
              <el-checkbox-group v-model="getIndex" @change="handleCheckedGetIndexChange">
                <el-checkbox v-for="getIndexName in getIndexs" :label="getIndexName.key" :key="getIndexName.key">
                  {{ getIndexName.label }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="getRegionBox" v-if="isVisibleAreaTab">
              <span class="titleYellow" v-if="isCountry">国家</span>
              <span class="titleYellow" v-if="!isCountry">地区</span>
              <el-checkbox-group v-model="getRegion" @change="handleCheckedGetRegionChange">
                <el-checkbox v-for="item in getRegions" :label="item.key" :key="item.key">{{ item.label }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="getTimeBox">
              <p class="titleYellow">时间</p>
              <el-checkbox-group v-model="getTime" @change="handleCheckedGetTimeChange">
                <el-checkbox v-for="getTimeName in getTimes" :label="getTimeName.key" :key="getTimeName.key">
                  {{ getTimeName.label }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </div>
      </div>
      <div class="mainTerm">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="指标" name="first">
            <div class="clearfix">
              <el-input placeholder="输入关键字进行过滤" v-model="filterText" class="inputFloat"></el-input>
              <img src="../assets/image/refresh.png" class="imgFloat" @click="filterTextClear" />
            </div>
            <div class="tree">
              <el-tree class="filter-tree" :data="data" :props="defaultProps" :default-expand-all="true" :filter-node-method="filterNode" ref="tree" show-checkbox node-key="codes" @node-click="nodeClickHandle" :default-expanded-keys="[]" @check-change="checkChangeHandle"></el-tree>
            </div>
          </el-tab-pane>

          <el-tab-pane :label=areaName name="second" class="timeCheck" v-if="isVisibleAreaTab">
            <div class="clearfix">
              <el-input placeholder="输入关键字进行过滤" v-model="filterTextRegion" class="inputFloat"></el-input>
              <img src="../assets/image/refresh.png" class="imgFloat" @click="filterTextRegionClear" />
            </div>
            <div class="tree">
              <el-tree class="filter-tree" :data="dataRegion" :props="defaultPropsRegion" :default-expand-all="true" :filter-node-method="filterNodeRegion" ref="treeRegion" show-checkbox node-key="code" @node-click="nodeClickHandleRegion" :default-expanded-keys="[]" @check-change="checkChangeHandleRegion">
              </el-tree>
            </div>
          </el-tab-pane>
          <el-tab-pane label="时间" name="three" class="timeCheck">
            <div class="clearfix">
              <el-input placeholder="输入关键字进行过滤" v-model="filterTextTime" class="inputFloat"></el-input>
              <img src="../assets/image/refresh.png" class="imgFloat" @click="filterTextTimeClear" />
            </div>

            <el-dropdown trigger="click" @command="timeFilterSelectFn" style="color: #fff" class="timeSelect">
              <span class="el-dropdown-link">
                {{ timeFilterSelectVal
                }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="item" v-for="item in timeFilterSelectArr" :key="item.label">{{ item.label }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

            <div class="tree">
              <el-tree class="filter-tree" :data="dataTime" :props="defaultPropsTime" :default-expand-all="true" :filter-node-method="filterNodeTime" ref="treeTime" show-checkbox node-key="id" @node-click="nodeClickHandleTime" :default-expanded-keys="[]" @check-change="checkChangeHandleTime">
              </el-tree>
            </div>
          </el-tab-pane>
        </el-tabs>
        <p @click="termlook" class="conditions">查看条件</p>
      </div>
      <div class="mainContainer">
        <div class="predictWinBox" v-show="sysannouncementVisible">
          <div class="predictWin">
            <p class="predictTitle">收藏</p>
            <el-input v-model="sysannouncementTitle" placeholder="请输入收藏标题" class="inputBlack"></el-input>
            <div class="predictBtn clearfix">
              <p @click="sysannouncementVisible = false">取 消</p>
              <p @click="sysannouncementSave">确 定</p>
            </div>
          </div>
        </div>

        <div class="predictWinBox" v-show="analysisWin">
          <div class="predictWin">
            <p class="predictTitle">指标分析</p>
            <el-select v-model="anaVal" placeholder="请选择">
              <el-option v-for="item in anaName" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <div class="predictBtn clearfix">
              <p @click="anaCancel">取消</p>
              <p @click="anaBegin">开始分析</p>
            </div>
          </div>
        </div>
        <div class="predictWinBox" v-show="predictWin">
          <div class="predictWin">
            <p class="predictTitle">指标预测</p>
            <el-select v-model="preVal" placeholder="请选择">
              <el-option v-for="item in preNum" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-select v-model="preNameVal" placeholder="请选择">
              <el-option v-for="item in preName" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <div class="predictBtn clearfix">
              <p @click="preCancel">取消</p>
              <p @click="preBegin">开始预测</p>
            </div>
          </div>
        </div>
        <div class="predictWinBox" v-show="statisticalWin">
          <div class="predictWin">
            <p class="predictTitle">指标统计</p>
            <el-checkbox-group v-model="checkedStat" @change="handleCheckedStatChange">
              <el-checkbox v-for="statName in statNames" :label="statName.label" :key="statName.key">{{ statName.label }}
              </el-checkbox>
            </el-checkbox-group>
            <div class="predictBtn clearfix">
              <p @click="staCancel">取消</p>
              <p @click="staBegin">开始统计</p>
            </div>
          </div>
        </div>
        <!-- <div class="mainConHead clearfix">
          <el-select v-model="value" placeholder="请选择" @change="selectHandle1">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-select v-model="other" placeholder="请选择" @change="selectHandle2">
            <el-option v-for="item in others" :key="item.key" :label="item.label" :value="item.key"></el-option>
          </el-select>
        </div> -->

        <div class="mainBody" ref="imageWrapper">
          <a :href="downImg" :download="picName" id="downImg" style="display: none"></a>
          <div class="mainBody_tab_content">
            <div>
              <div v-show="anaDataShow">
                <h1 class="anaDataTitle" @click="anaDataTitleBtn">
                  <span>{{ anaDataTitle }}</span>
                  <img src="../assets/image/anaDataTitle.png" />
                  <p class="anaDataClose" @click="anaDataClose">
                    <img src="../assets/image/close.png" />
                  </p>
                </h1>
                <div id="anaData" class="clearfix" v-show="anaDataCnt"></div>
              </div>
              <div class="chartBox clearfix">
                <div id="myChart" :style="{ width: '90%', height: '400px' }" v-show="graphShow"></div>
                <ul v-show="graphShow" class="chartChangeSelect">
                  <li style="padding-bottom:5px" v-if="!isCountry && isVisibleAreaTab">
                    <el-select v-model="value" placeholder="请选择" @change="selectHandle1">
                      <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                  </li>
                  <li style="padding-bottom:5px" v-if="!isCountry && !isVisibleAreaTab">
                    <el-select v-model="value" placeholder="请选择" @change="selectHandle1">
                      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                  </li>
                  <li style="padding-bottom:5px" v-if="isCountry">
                    <el-select v-model="value" placeholder="请选择" @change="selectHandle1">
                      <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                  </li>
                  <li style="padding-bottom:20px">
                    <el-select v-model="other" placeholder="请选择" @change="selectHandle2">
                      <el-option v-for="item in others" :key="item.key" :label="item.label" :value="item.key"></el-option>
                    </el-select>
                  </li>
                </ul>
                <ul v-show="graphShow" class="chartChange">

                  <li @click="zhuzhuang" :class="{ on: changeOn == 0 }">
                    <img src="../assets/image/chartChange1.png" />
                    <span>柱状图</span>
                  </li>
                  <li @click="hengtiao" :class="{ on: changeOn == 1 }">
                    <img src="../assets/image/chartChange2.png" />
                    <span>横条图</span>
                  </li>
                  <li @click="line" :class="{ on: changeOn == 2 }">
                    <img src="../assets/image/chartChange3.png" />
                    <span>折线图</span>
                  </li>
                  <li @click="duidie" :class="{ on: changeOn == 3 }">
                    <img src="../assets/image/chartChange4.png" />
                    <span>堆叠图</span>
                  </li>
                  <!-- <li @click="bing()" :class="{ on: changeOn == 4 }">
                    <img src="../assets/image/chartChange5.png" />
                    <span>饼图</span>
                  </li> -->
                </ul>
              </div>

              <div v-show="cur == 7" v-if="isVisibleAreaTab" class="mainMap">
                <el-select v-model="mapIndex" placeholder="请选择" @change="chartSettings">
                  <el-option v-for="item in mapIndexs" :key="item" :label="item" :value="item"></el-option>
                </el-select>
                <div class="mapYears">
                  <img src="../assets/image/mapIcon1.png" class="mapIcon1" @click="prev" />
                  <div :style="{
                      height: mapYearsHeight + 'px',
                      overflow: 'hidden',
                      padding: '0 10px',
                    }">
                    <ul :style="{
                        'margin-top': mapYearsNum * 60 + 'px',
                        transition: 'all .3s ease-out .1s',
                      }">
                      <li v-for="(item, index) in mapYears" :key="index">
                        {{ item }}
                        <img src="../assets/image/mapIcon3.png" class="mapIcon" v-if="item !== mapYear" @click="
                            () => {
                              mapYearChange(item);
                            }
                          " />
                        <img src="../assets/image/mapIcon4.png" class="mapIcon mapIconActive" v-else />
                        <div class="mapYears-line"></div>
                      </li>
                    </ul>
                  </div>
                  <img src="../assets/image/mapIcon2.png" class="mapIcon2" @click="next" />
                </div>
                <div id="main" style="width: 800px; height: 700px; margin: auto"></div>
              </div>
              <!--  指标说明-->
              <div class="predictWinBox indexCodePopBox" v-if="isIndexCodePopShow">
                <div class="predictWin">
                  <div class="predictTitle indexCodePop">
                    指标说明
                    <img src="../assets/image/close.png" @click="isIndexCodePopShow = false" />
                  </div>
                  <ul>
                    <li v-for="(item, index) in macroIndexCodeArr" :key="index">
                      <div>{{ item.name }}</div>
                      <div>{{ item.value }}</div>
                    </li>
                  </ul>
                </div>
              </div>
              <!-- 时间 + 指标  -->
              <div class="table-l" v-show="cur != 7">
                <el-table :data="tableDataArr" ref="multipleTable" id="mytable" style="width: 100%" @selection-change="handleSelectionChange" v-show="statementShow" :sort-change="changeTableSort" :cell-style="cellStyle" :default-sort="{ prop: 'date', order: 'descending' }">
                  <el-table-column type="selection" width="55" fixed></el-table-column>
                  <el-table-column fixed prop="name" :label="tableColumnName1" :width="tableColumnWidth1">
                    <template slot-scope="scope">
                      <div @click="checkMacroIndex(scope.row.fullIndexName)" style="cursor: pointer">
                        <img src="../assets/image/thIcon.png" style="vertical-align: middle; margin-right: 10px" v-show="iconShow" /><span style="vertical-align: middle">{{
                          scope.row.name
                        }}</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column v-for="item in tableColumn" v-bind:key="item" :prop="item" :width="tableColumn.length > 10 ?'200':''" :sort-by="item" :label="item" sortable :sort-method="
                      (a, b) => {
                        return sortMethod(a, b, item);
                      }
                    "></el-table-column>
                </el-table>
              </div>
              <el-table :data="ExportTable" style="width: 1px; height: 1px;" id="tableDetailData">
                <el-table-column type="index" width="55" fixed></el-table-column>
                <el-table-column v-for="(value, key) in ExportTable[0]" :key="key" :prop="key" :label="key" :fixed="key == 'name'" />
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
       <!-- <com-foot></com-foot> -->
  </div>
</template>
<script>
import { mapGetters,mapMutations } from 'vuex'
import indexHead from "../components/head";
import indexBreadcrumb from "../components/breadcrumb";
// import comFoot from "../components/comfoot";
import FileSaver from "file-saver";
import XLSX from "xlsx";
import html2canvas from "html2canvas";
import { getHideAreaArr, tabTable } from "./components/macro/table.js";
import _ from 'lodash';
import china from "@/assets/json/china.json";
import geoCoordMap from "./components/macro/geoCoordMap.js";
import printJS from 'print-js'
export default {
  data() {
    return {
      china: china,
      areaName: "地区",
      ExportTable: [], // 导出的备份
      macroIndexCodeArr: [],
      isIndexCodePopShow: false,
      timeSource: [],
      timeFilterSelectArr: [

        {
          value: 5,
          label: "近5年",
        },
        {
          value: 10,
          label: "近10年",
        },
        {
          value: 20,
          label: "近20年",
        },
      ],
      timeFilterSelectVal: "",
      sysannouncementVisible: false,
      sysannouncementTitle: "", // 收藏标题
      downImg: "",
      // getDateType: "check", // 判断是点击提取按钮还是查看条件按钮，这俩调的接口不一样处理数据结构不一样
      anaDataCnt: true,
      anaDataTitle: "",
      dataRegion: [
        {
          id: 2,
          codename: "全选",
          children: [
            {
              id: 5,
              label: "二级 2-1",
            },
            {
              id: 6,
              label: "二级 2-2",
            },
          ],
        },
      ],
      dataTime: [
        {
          id: 3,
          label: "全选",
          children: [],
        },
      ],
      defaultPropsRegion: {
        children: "children",
        label: "codename",
      },
      defaultPropsTime: {
        children: "children",
        label: "label",
      },
      trNum: "trNum",
      anaDataShow: false,
      mainPositionWinShow: false,
      iconShow: true,
      getIndex: [],
      getTime: [],
      getTimes: [],
      getRegions: [],
      getRegion: [],
      getIndexs: [],
      checkedStat: [],
      statNames: [
        {
          label: "求和值",
          key: "1",
        },
        {
          label: "求平均",
          key: "2",
        },
        {
          label: "最大值",
          key: "3",
        },
        {
          label: "求最小值",
          key: "4",
        },
        {
          label: "中位数",
          key: "5",
        },
        {
          label: "众数",
          key: "6",
        },
        {
          label: "方差",
          key: "7",
        },
        {
          label: "标准差",
          key: "8",
        },
      ],
      statisticalWin: false,
      graphShow: true,
      statementShow: true,
      anaData: "",
      preNum: [
        {
          value: "1",
          label: "1",
        },
        {
          value: "2",
          label: "2",
        },
        {
          value: "3",
          label: "3",
        },
        {
          value: "4",
          label: "4",
        },
        {
          value: "5",
          label: "5",
        },
      ],
      preName: [
        {
          value: "自回归移动平均模型",
          label: "自回归移动平均模型",
        },
        {
          value: "霍尔特指数平滑法",
          label: "霍尔特指数平滑法",
        },
        {
          value: "简单指标平滑法",
          label: "简单指标平滑法",
        },
        {
          value: "霍尔特-温特指数平滑法",
          label: "霍尔特-温特指数平滑法",
        },
      ],
      anaName: [
        {
          value: "相关性分析",
          label: "相关性分析",
        },
        {
          value: "主成分分析",
          label: "主成分分析",
        },
        {
          value: "线性回归法",
          label: "线性回归法",
        },
        {
          value: "描述性分析",
          label: "描述性分析",
        },
      ],
      analysisWin: false,
      preVal: "1",
      preNameVal: "自回归移动平均模型",
      anaVal: "相关性分析",
      predictWin: false,
      cur: 0,
      changeOn: 0,
      tableYears: [],
      tableLegend: [],
      chartSeries: [],
      tableSearch: [],
      chartType: "bar",
      chartDirection: "row",
      chartStack: false,
      options: [
        {
          value: "1",
          label: "时间+指标",
        },
        // {
        //   value: "6",
        //   label: "时间+地区",
        // },
        // {
        //   value: "2",
        //   label: "指标+时间",
        // },
        // {
        //   value: "3",
        //   label: "地区+指标",
        // },
        // {
        //   value: "4",
        //   label: "指标+地区",
        // },
        // {
        //   value: "5",
        //   label: "地区+时间",
        // },
      ],
      options2: [
        {
          value: "1",
          label: "时间+指标",
        },
        {
          value: "6",
          label: "时间+地区",
        },
        {
          value: "3",
          label: "地区+指标",
        }
      ],
      options1: [
        {
          value: "1",
          label: "时间+指标",
        },
        {
          value: "6",
          label: "时间+国家",
        },
        {
          value: "2",
          label: "指标+时间",
        },
        {
          value: "3",
          label: "国家+指标",
        },
        {
          value: "4",
          label: "指标+国家",
        },
        {
          value: "5",
          label: "国家+时间",
        },
      ],
      others: [],
      value: "1",
      other: "",
      tableData: [],
      holtPath: {
        自回归移动平均模型: "/analysis-util/GetAutoRegressive",
        霍尔特指数平滑法: "/analysis-util/GetHoltWinters",
        简单指标平滑法: "/analysis-util/GetSimple",
        "霍尔特-温特指数平滑法": "/analysis-util/GetWinters",
      },
      anaPath: {
        相关性分析: "/analysis-util/GetConnection",
        主成分分析: "/analysis-util/GetIngredient",
        线性回归法: "/analysis-util/GetLinearRegression",
        描述性分析: "/analysis-util/GetStatistical",
      },
      activeName: "first",
      filterText: "",
      filterTextRegion: "",
      filterTextTime: "",
      data: [],
      defaultProps: {
        children: "children",
        label: "label",
      },

      token: localStorage.getItem("TOKEN_KEY"),

      multipleSelection: [],
      calculationColums: [], // 统计新增列
      sourceData: {}, // 数据接口返回的源码
      mapIndexs: [], // 地图指标筛选项
      mapIndex: "",
      mapYears: [],
      mapYear: "",
      mapYearsNum: 0, //
      statisticType: "1",
      otherLabel: "北京市",
      picName: "",
    };
  },
  components: {
    // comFoot,
    indexBreadcrumb,
    indexHead,
    html2canvas,
  },
  inject: ["reload"],
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    filterTextRegion(val) {
      if (this.isVisibleAreaTab) this.$refs.treeRegion.filter(val);
    },
    filterTextTime(val) {
      this.$refs.treeTime.filter(val);
    },
    $route(to, from) {
      // 防止外部跳入重复执行
      if (to.name === from.name) this.reload();
    },
  },
  computed: {
   
    ...mapGetters({ userInfo: 'getUserInfo' }),
    // 是否显示 地区 tab
    isVisibleAreaTab() {
      let arr = getHideAreaArr();
      return arr.indexOf(this.tableName) < 0;
    },
    isCountry() {
      var url = window.location.href;
      var loc = url.substring(url.lastIndexOf("=") + 1, url.length);
      if (loc == "beltroad_year") {
        this.areaName = "国家"
        return true;
      }
      return false;
    },
    tableName() {
      if (this.$route.query.tablename.indexOf("season") != -1)
        //前4/8/12季度
        this.timeFilterSelectArr = [

          {
            value: 4,
            label: "前4季度",
          },
          {
            value: 8,
            label: "前8季度",
          },
          {
            value: 12,
            label: "前12季度",
          },
        ];
      else if (this.$route.query.tablename.indexOf("month") != -1)
        //前4/8/12季度
        this.timeFilterSelectArr = [

          {
            value: 12,
            label: "前12月",
          },
          {
            value: 24,
            label: "前24月",
          },
          {
            value: 36,
            label: "前36月",
          },
        ];

      return this.$route.query.tablename || "area_province_year";
    },
    menuType() {
      if(this.$route.query.status==3){
        localStorage.setItem("REGION_CODE",this.$route.query.menuType)
        localStorage.setItem("STATUS",this.$route.query.status)
      }
      return this.$route.query.menuType;
    },
    breadcrumb(){
      return this.$route.query.breadcrumb;
    },
    headTag(){
      return this.$route.query.headTag;
    },
    status() {
      return this.$route.query.status;
    },
    setToken() {
      localStorage.setItem('TOKEN_KEY',this.$route.query.token)
      return this.$route.query.token;
    },
    // 第一列名字
    tableColumnName1() {
      let value = this.value;
      if (value == 1) {
        this.iconShow = true;
      }
      if (value == 3) {
        this.iconShow = false;
      }
      if (value == 1 || value == 3) {
        return "指标";
      } else if (value == 2 || value == 5) {
        this.iconShow = false;
        return "时间";
      } else if (value == 4 || value == 6) {
        this.iconShow = false;
        var url = window.location.href;
        var loc = url.substring(url.lastIndexOf("=") + 1, url.length);
        if (loc == "beltroad_year") {
          return "国家";
        }
        return "地区";
      }
    },
    // 第一列宽度
    tableColumnWidth1() {
      let value = this.value;
      if (value == 1 || value == 3) {
        return 360;
      } else if (value == 2 || value == 5) {
        return 100;
      } else if (value == 4 || value == 6) {
        return 150;
      }
      this.$refs.multipleTable.doLayout();
    },
    tableDataArr() {
      if ([1, 3, 6].indexOf(Number(this.value)) >= 0) {
        return this.tableData;
      }
      let result = [];
      let years = this.tableYears;
      let tableSearch = this.tableSearch;
      let calculationColums = this.calculationColums;
      let datas = calculationColums.concat(tableSearch, years);
      if (datas.length) {
        datas.forEach((key) => {
          let obj = {};
          this.tableData.forEach((j) => {
            obj[j.name] = j[key];
            obj["name"] = key;
          });
          result.push(obj);
        });
      }
      return result;
    },
    tableColumn() {
      this.tableYears.sort().reverse();
      if ([1, 3, 6].indexOf(Number(this.value)) >= 0) {
        let years = this.tableYears;
        let tableSearch = this.tableSearch;
        let calculationColums = this.calculationColums;
        return calculationColums.concat(tableSearch, years);
      }
      let tableColumn = [];
      if (this.tableData.length) {
        tableColumn = this.tableData.map((item) => {
          return item.name;
        });
      }
      return tableColumn;
    },
    mapYearsHeight() {
      let len = this.mapYears.length;
      if (len >= 8) {
        return 60 * 8;
      }
      return 60 * len;
    },
  },

  mounted() {
    $(function () {
      $(".el-badge.item sup").hide();
      var url = window.location.href;
      var loc = url.substring(url.lastIndexOf("=") + 1, url.length);
      if (loc == "beltroad_year") {
        $(".mainBody_tab_tilte li").eq(6).hide();
      }
    });
    this.firstInit();
    this.statistic();
  },
  methods: {
    ...mapMutations(['setBreadcrumb','setHeadTag']),
    statistic() {
      this.$axios
        .request({
          url: "5100/users-anon/statistic",
          method: "post",
          params: {
            access_token: this.token,
          },
          data: {
            username: this.token,
            type: this.statisticType,
            cnt: 1,
            page: this.$route.query.tablename,
            code: this.getIndex.join(","),
          },
        })
        .then((res) => { })
        .catch(function (error) {
          console.log(error);
        });
    },
    prev() {
      if (this.mapYearsNum < 0) {
        this.mapYearsNum += 1;
      }
    },
    next() {
      let len = this.mapYears.length;
      if (len <= 8) return;
      if (len - 8 !== Math.abs(this.mapYearsNum)) {
        this.mapYearsNum -= 1;
      }
      // if (this.mapYearsNum > -(this.mapYears.length + this.mapYearsNum)) {
      //   this.mapYearsNum -= 1;
      // } else if (this.mapYearsNum < -(this.mapYears.length + this.mapYearsNum) && -(this.mapYears.length + this.mapYearsNum) != -0) {
      //   this.mapYearsNum -= 1;
      // }
    },
    mapYearChange(mapYear) {
      this.mapYear = mapYear;
      this.chartSettings();
    },
    // 地图配置项目
    chartSettings() {
      if (!this.isVisibleAreaTab) return;
      var myChart = this.$echarts.init(document.getElementById("main"));
      let sourceData = this.sourceData;
      // 数据初始化
      this.mapYears = _.cloneDeep(this.tableYears);
      if (!this.mapYear) this.mapYear = this.mapYears[0];
      if (!this.mapIndexs.length) {
        for (const key in sourceData) {
          this.mapIndexs.push(key.split("|")[1]);
        }
      }
      if (!this.mapIndex) this.mapIndex = this.mapIndexs[0];
      let mapDatas = [],
        legendDatas = [];
      for (const key in sourceData) {
        if (this.mapIndex === key.split("|")[1]) {
          for (const key1 in sourceData[key]) {
            let name = key1.split("|")[1];
            legendDatas.push(name);
            for (const key3 in sourceData[key][key1]) {
              if (this.mapYear === key3) {
                let coord = geoCoordMap[name.replace("市", "")];
                if (coord) {
                  mapDatas.push({
                    name: name,
                    value: sourceData[key][key1][key3],
                    coord: coord,
                  });
                }
              }
            }
          }
          break;
        }
      }
      this.$echarts.registerMap('china', china);
      var option = {
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            if (legendDatas.indexOf(params.data.name) >= 0) {
              return params.data.name + ":" + params.data.value;
            }
            return "";
          },
        },
        legend: {
          show: false,
          data: legendDatas,
        },
        visualMap: {
          show: false,
          min: 0,
          max: 1000,
          left: "right",
          inRange: {
            color: [
              "#313695",
              "#4575b4",
              "#74add1",
              "#abd9e9",
              "#e0f3f8",
              "#ffffbf",
              "#fee090",
              "#fdae61",
              "#f46d43",
              "#d73027",
              "#a50026",
            ],
          },
          calculable: true,
        },
        series: [
          {
            name: "数据",
            type: "map",
            mapType: "china",
            hoverable: false,
            showLegendSymbol: false,
            roam: false,
            zoom: 1.2,
            data: [
              // value可以对应的相应的颜色区域值
              {
                name: "北京",
                value: 120,
              },
              {
                name: "天津",
                value: 120,
              },
              {
                name: "上海",
                value: 80,
              },
              {
                name: "重庆",
                value: 100,
              },
              {
                name: "河北",
                value: 100,
              },
              {
                name: "河南",
                value: 100,
              },
              {
                name: "云南",
                value: 40,
              },
              {
                name: "辽宁",
                value: 120,
              },
              {
                name: "黑龙江",
                value: 100,
              },
              {
                name: "湖南",
                value: 80,
              },
              {
                name: "安徽",
                value: 80,
              },
              {
                name: "山东",
                value: 100,
              },
              {
                name: "新疆",
                value: 40,
              },
              {
                name: "江苏",
                value: 80,
              },
              {
                name: "浙江",
                value: 60,
              },
              {
                name: "江西",
                value: 80,
              },
              {
                name: "湖北",
                value: 100,
              },
              {
                name: "广西",
                value: 40,
              },
              {
                name: "甘肃",
                value: 120,
              },
              {
                name: "山西",
                value: 120,
              },
              {
                name: "内蒙古",
                value: 140,
              },
              {
                name: "陕西",
                value: 120,
              },
              {
                name: "吉林",
                value: 120,
              },
              {
                name: "福建",
                value: 60,
              },
              {
                name: "贵州",
                value: 80,
              },
              {
                name: "广东",
                value: 40,
              },
              {
                name: "青海",
                value: 100,
              },
              {
                name: "西藏",
                value: 40,
              },
              {
                name: "四川",
                value: 80,
              },
              {
                name: "宁夏",
                value: 140,
              },
              {
                name: "海南",
                value: 20,
                test: "none",
              },
              {
                name: "台湾",
                value: 40,
              },
              {
                name: "香港",
                value: 20,
              },
              {
                name: "澳门",
                value: 20,
              },
            ],
            itemStyle: {
              // 地图模块边框颜色
              normal: {
                borderColor: "#fff",
              },
            },
            // 标记点配置
            markPoint: {
              name: "data",
              symbolSize: 20,
              itemStyle: {
                normal: {
                  color: "#FF8203",
                  borderColor: "#87cefa",
                  borderWidth: 1, // 标注边线线宽，单位px，默认为1
                  label: {
                    formatter: "{b}",
                    show: true,
                    position: "right",
                    color: "#FF8203",
                    fontWeight: "bold",
                  },
                },
                emphasis: {
                  borderColor: "#fff",
                  borderWidth: 5,
                  label: {
                    show: false,
                  },
                },
              },
              data: mapDatas,
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    async checkMacroIndex(fullIndexName) {
      if (!fullIndexName) return;
      this.isIndexCodePopShow = true;
      let data = {
        code: fullIndexName.split("|")[0],
        tableName: this.tableName,
      };
      let res = await this.$axios.request({
        url: "5802/macroindex/getindex",
        method: "post",
        params: data,
      });
      let obj = {
        caname: "指标名称（中文）",
        eaname: "指标名称（英文）",
        cunit: "指标单位（中文）",
        eunit: "指标单位（英文）",
        cexp: "指标解释（中文）",
        eexp: "指标解释（英文）",
        source: "数据来源",
        mark: "更新频率",
        minTime: "数据起始日",
        maxTime: "数据截止日",
        cmemo: "其他说明",
      };
      let rusult = [];
      let datas = res.data.datas;
      for (const key in obj) {
        rusult.push({
          name: obj[key],
          value: datas[key],
        });
      }
      this.macroIndexCodeArr = Object.assign([], rusult);
    },
    timeFilterSelectFn(val) {
      //TODO 修改 时间选择器数据

      this.timeFilterSelectVal = val.label;

      this.$refs.treeTime.setCheckedKeys(this.timeSource.slice(0, val.value));


      // val.value  todo 筛选年份
      // debugger
      // let value =
      //   val.value === "全部"
      //     ? ""
      //     : this.timeSource.slice(0, val.value).join(",");
      // this.$refs.treeTime.filter(value);
    },
    firstInit() {
      var that = this;
      let result = tabTable.find((item) => {
        return item.tableName.indexOf(this.tableName) >= 0;
      });
      if(that.breadcrumb!=undefined){
        this.setBreadcrumb(that.breadcrumb.split(","))
      }
      if(that.headTag!=undefined){
        this.setHeadTag(that.headTag.split(","))
      }
      var params = new URLSearchParams();
      params.append("tableName", that.tableName);
      params.append("menuType", that.menuType);
      params.append("status", that.status);
      let data1 = new Promise((resolve, reject) => {
        this.$axios
          .request({
            url: "5700/websingletable/getIndex",
            method: "get",
            params: params,
          })
          .then(function (response) {
            var data = that.getNavData(response.data);
            that.data = data;
            resolve(response);
          })
          .catch(function (error) {
            reject(error);
            console.log(error);
          });
      });

      let dataTime1 = new Promise((resolve, reject) => {
        this.$axios
          .request({
            url: "5700/websingletable/getTime",
            method: "get",
            params: params,
          })
          .then(function (res) {
            resolve(res);
            // 原始数据
            res.data.sort(function (a, b) {
              return b - a;
            });
            that.timeSource = res.data;
            if (res.data) {
              that.setTimeTrees(res, result);
            }
          })
          .catch(function (error) {
            reject(error);
            console.log(error);
          });
      });
      //
      let dataRegion1 = new Promise((resolve, reject) => {
        this.$axios
          .request({
            url: "5700/websingletable/getRegion",
            method: "get",
            params: params,
          })
          .then(function (res) {
            that.setRegionTrees(res, result);
            resolve(res);
          })
          .catch(function (error) {
            reject(error);
            console.log(error);
          });
      });

      data1
        .then(() => {
          return dataTime1;
        })
        .then(() => {
          return dataRegion1;
        })
        .then(() => {
          let pageType = this.$route.query.pageType;
          if (pageType === "changeParam") {
            // 自带默认查询数据,从收藏列表页面过来
            let { indexCode, regionCode, timeCode } = JSON.parse(
              localStorage.getItem("macroCodes")
            );
            // index_code: this.getIndex.join(','),  // 隐藏指标代码，隐藏提交
            //   region_code: this.getRegion.join(','), // 隐藏地区代码，隐藏提交
            //   time_code: this.getTime.join(','),  // 隐藏时间代码，隐藏提交
            //  that.termlook();
            // let {getIndex, getRegion, getTime} = this.viewConditions();
            this.checkChangeHandle(null, null, null, indexCode.split(","));
            this.checkChangeHandleRegion(
              null,
              null,
              null,
              regionCode.split(",")
            );
            this.checkChangeHandleTime(null, null, null, timeCode.split(","));
            // todo  从缓存中拿数据
            return this.termSubmit();
          }
          return that.websingletableGetData();
        })
        .finally(() => {
          that.mainPositionWinShow = false;
        });
    },
    // 添加收藏
    sysannouncementSave() {
      const loading = this.$loading({
        lock: true,
        text: "收藏中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$axios
        .request({
          url: "5200/sysannouncement/save",
          method: "post",
          params: {
            access_token: localStorage.getItem("TOKEN_KEY"),
          },
          data: {
            titile: this.sysannouncementTitle, // 收藏名称，显示提交
            templateName: this.tableName, // 隐藏表名称，隐藏提交
            indexCode: this.getIndex.join(","), // 隐藏指标代码，隐藏提交
            regionCode: this.getRegion.join(","), // 隐藏地区代码，隐藏提交
            timeCode: this.getTime.join(","), // 隐藏时间代码，隐藏提交
          },
        })
        .then((res) => {
          if (String(res.data.resp_code) === "1") {
            // 失败
            this.$message.error(res.data.resp_msg);
            return;
          }
          this.statisticType = "2";
          this.statistic();
          this.sysannouncementVisible = false;
          this.sysannouncementTitle = "";
          this.$message.success("添加收藏成功!");
          $(".el-badge.item sup").show();
        })
        .finally(() => {
          loading.close();
        });
    },
    setRegionTrees(res, result) {
      if (!result || result.area === "1") {
        // 只显示省
        this.dataRegion[0].children = res.data;
      } else if (result.area === "0") {
        // 全国
        this.dataRegion[0].children = [];
      } else {
        let arr = this.getTreeMenuData(res.data, 0);
        this.dataRegion[0].children = arr;
      }
    },

    // 递归获取 省市区数组
    getTreeMenuData(arr, parentId) {
      let resultArr = [];
      for (var i = 0; i < arr.length; i++) {
        if (parentId == arr[i].parenid) {
          arr[i].children = this.getTreeMenuData(arr, arr[i].id);
          resultArr.push(arr[i]);
        }
      }
      return resultArr;
    },
    setTimeTrees(res, result) {
      if (!result || result.time === "1") {
        let timeArr = [];
        for (let e of res.data) {
          timeArr.push({
            id: e,
            label: e,
          });
        }
        this.dataTime = [
          {
            id: 3,
            label: "全选",
            children: timeArr,
          },
        ];
      } else if (result.time === "2") {
        let map = new Map();
        let timeArr = [];
        for (let e of res.data) {
          let year = e.substring(0, 4);
          let value = map.get(year) || [];
          value.push({
            id: e,
            label: e,
          });
          map.set(year, value);
        }
        for (let e of map) {
          let key = e[0];
          let value = e[1];
          timeArr.push({
            id: "id_" + key,
            label: key,
            children: value,
          });
        }

        this.dataTime = [
          {
            id: 3,
            label: "全选",
            children: timeArr,
          },
        ];
      }
    },

    sortMethod(str1, str2, key) {
      let val1 = Number(str1[key]) || 0;
      let val2 = Number(str2[key]) || 0;
      if (isNaN(val1)) {
        val1 = 0;
      }
      if (isNaN(val2)) {
        val2 = 0;
      }
      return val1 > val2 ? -1 : 1;
    },
    cellStyle(data) {
      let column = data.column.label;
      let row = data.row.name;
      let arr = this.tableSearch.concat(this.calculationColums);
      let { type } = data.column;
      if (type !== "default") {
        return "";
      }
      if ([1, 3, 6].indexOf(Number(this.value)) >= 0) {
        if (arr.indexOf(column) >= 0) {
          return "color:red";
        }
      } else {
        if (arr.indexOf(row) >= 0 && data.columnIndex !== 1) {
          return "color:red";
        }
      }
    },
    termlook() {
      window.scrollTo(0, 0);
      // this.mainPositionWinShow = true;
      let getIndexLength = this.getIndex.length;
      let getRegionLength = this.getRegion.length;
      let getTimeLength = this.getTime.length;
      if (getIndexLength == 0 && getRegionLength == 0 && getTimeLength == 0) {
        let { getIndex, getRegion, getTime } = this.viewConditions();
        this.checkChangeHandle(null, null, null, getIndex);
        this.checkChangeHandleRegion(null, null, null, getRegion);
        this.checkChangeHandleTime(null, null, null, getTime);
      } else {
        this.mainPositionWinShow = true;
      }
    },

    setOthers() {
      let { value, getTimes, getRegions, getIndexs } = this;

      this.others = [];
      let baseArr = [];
      let { sourceData } = this;
      if (_.isEmpty(sourceData)) {
        this.others = [];
        this.other = "";
        return;
      }
      // if (this.getDateType === "check") {
      if (value == 1 || value == 2) {
        if (getRegions.length) {
          this.others = getRegions;
          this.otherLabel = this.others[0].label;
        } else {
          let year = []; // 避免重复，避免少值
          for (const key in sourceData) {
            for (const key1 in sourceData[key]) {
              if (year.indexOf(key1) < 0) {
                year.push(key1);
                baseArr.push({
                  key: key1.split("|")[0],
                  label: key1.split("|")[1],
                });
              }
            }
          }
          this.others = baseArr;
        }
        this.others.sort((a, b) => {
          return Number(a.key) - Number(b.key);
        });
        this.otherLabel = this.others[0].label;
      } else if (value == 3 || value == 4) {
        // 时间
        if (getTimes.length) {
          this.others = getTimes;
        } else {
          let year = []; // 避免重复，避免少值
          for (const key in sourceData) {
            for (const key1 in sourceData[key]) {
              for (const key2 in sourceData[key][key1]) {
                if (year.indexOf(key2) < 0) {
                  year.push(key2);
                  baseArr.push({
                    key: key2,
                    label: key2,
                  });
                }
              }
            }
          }
          this.others = baseArr;
        }
        this.otherLabel = this.others[0].label;
      } else if (value == 5 || value == 6) {
        // 指标
        if (getIndexs.length) {
          getIndexs.forEach((item) => {
            this.others.push({ key: item.label, label: item.label });
          });
        } else {
          for (const key in sourceData) {
            baseArr.push({
              key: key.split("|")[1],
              label: key.split("|")[1],
            });
          }
          this.others = baseArr;
        }
        this.otherLabel = this.others[0].label;
      }

      if (this.others.length) {
        // 有北京市默认北京
        let result = this.others.find((item) => {
          return String(item.key) === "110000";
        });
        if (!!result) {
          this.other = "110000";
          return;
        }
      }
      this.other = this.others[0].key;
      return;
    },
    // 设置 点击查看条件按钮 设置 数组
    viewConditions() {
      // let {defaultData} = this;
      let { sourceData } = this;
      let getIndex = [];
      let getRegion = [];
      let getTime = [];
      for (let key in sourceData) {
        getIndex.push(key.split("|")[0]);
        let item1 = sourceData[key];
        for (let key1 in item1) {
          let region = key1.split("|")[0];
          if (getRegion.indexOf(region) < 0) {
            getRegion.push(region);
          }
          let item2 = item1[key1];
          for (let key2 in item2) {
            if (getTime.indexOf(key2) < 0) {
              getTime.push(key2);
            }
          }
        }
      }
      return {
        getIndex,
        getRegion,
        getTime,
      };
    },

    // 两个方法写在一起太乱 分开
    termSubmit() {
      const loading = this.$loading({
        lock: true,
        text: "正在提取数据...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.resetTable();
      this.mainPositionWinShow = false;
      var that = this;
      var params = new URLSearchParams();
      var checkedKey = this.$refs.tree.getCheckedKeys();
      var checkedKeyRegion = ["000000"];
      if (that.tableName.indexOf("global_") != -1) {
        checkedKeyRegion = ["000"];
      }

      if (this.isVisibleAreaTab)
        checkedKeyRegion = this.$refs.treeRegion.getCheckedKeys();
      var checkedKeyTime = this.$refs.treeTime.getCheckedKeys();

      let fn = (checkedKey) => {
        var codes = [];
        if (!!checkedKey.length) {
          for (var i = 0; i < checkedKey.length; i++) {
            if (/^id/.test(checkedKey[i])) {
              continue;
            }
            codes.push(checkedKey[i]);
          }
        }
        return codes;
      };
      let codes = fn(checkedKey);
      if (codes.length !== 0) {
        params.append("codes", codes.join());
      } else {
        params.append("codes", this.getDefualtMenu("getIndex").join());
      }
      let regions = [...new Set(fn(checkedKeyRegion))];
      if (regions.length !== 0) {
        params.append("regions", regions.join());
      } else {
        params.append("regions", this.getDefualtMenu("getRegion").join());
      }

      let times = fn(checkedKeyTime);
      if (times.length !== 0) {
        params.append("times", times.join());
      } else {
        params.append("times", this.getDefualtMenu("getTime").join());
      }
      params.append("tableName", that.tableName);
      params.append("menuType", that.menuType);
      params.append("status", that.status);
      this.$axios
        .request({
          url: "5700/websingletable/findData",
          method: "post",
          data: params,
        })
        .then(function (res) {
          if (!res.data) {
            alert("此条件下无对应数据");
          }
          that.sourceData = res.data;
          that.init();
        })
        .catch(function (error) {
          console.log(error);
        })
        .finally(() => {
          loading.close();
        });
      this.statisticType = "4";
      this.statistic();
    },
    websingletableGetData() {
      // 默认 查看条件
      var that = this;
      var params = new URLSearchParams();
      params.append("tableName", that.tableName);
      params.append("menuType", that.menuType);
      params.append("status", that.status);
      return new Promise((resolve, reject) => {
        this.$axios
          .request({
            url: "5700/websingletable/getData",
            method: "get",
            params: params,
          })
          .then(function (res) {
            that.sourceData = res.data;
            that.defaultData = res.data; // 默认数值
            that.init();
            that.termlook();
            resolve(res);
          })
          .catch(function (error) {
            reject(error);
          });
      });
    },
    init() {
      // 设置动态联动选择下拉框
      this.setOthers();
      this.setTableDatasGetData();
      this.$nextTick(() => {
        this.setSelect(this.tableDataArr);
      });
      this.drawLine(); // 其他图表
      this.chartSettings(); // 地图图表  只在有地区的情况下显示
    },
    // 处理 getData数据结构
    setTableDatasGetData() {
      // 处理 findData 数据结构
      let { sourceData, value, other } = this;
      if (_.isEmpty(sourceData)) {
        this.totalTableData = [];
        this.tableData = [];
        return;
      }
      let arr = [];
      this.tableYears = []; // 列

      if (value == 1 || value == 2) {
        for (var k in sourceData) {
          for (var code in sourceData[k]) {
            var data = sourceData[k][code];
            var item = {
              name: k.split("|")[1],
              code: code.split("|")[0],
            };
            if (value == 1) item.fullIndexName = k;
            for (var l in data) {
              item[l] = data[l];
              if (this.tableYears.indexOf(l) < 0) {
                this.tableYears.push(l);
              }
            }
            arr.push(item);
          }
        }
        this.tableYears.sort().reverse();
      } else if (value == 3 || value == 4) {
        let arr1 = [];

        for (const key in sourceData) {
          let item1 = sourceData[key];

          for (const key2 in item1) {
            let item2 = item1[key2];
            let cityName = key2.split("|")[1];
            if (this.tableYears.indexOf(cityName) < 0) {
              this.tableYears.push(cityName);
            }

            for (const key3 in item2) {
              let result = {
                name: key.split("|")[1], // 指标
                code: key3, // 年份
              };
              if (value == 3) result.fullIndexName = k;
              result[cityName] = item2[key3];
              arr.push(result);
            }
          }
        }

        let test = [];
        for (let i = 0; i < arr.length; i++) {
          let item = arr[i];
          let obj = {
            name: item.name,
            code: item.code,
          };
          for (let j = 0; j < arr.length; j++) {
            let item2 = arr[j];
            if (item2.name == item.name && item2.code == item.code) {
              for (const key in item2) {
                if (key !== "name" || key !== "code") {
                  obj[key] = item2[key];
                }
              }
              if (j > i) {
                arr.splice(j, 1);
                j--;
              }
            }
          }
          test.push(obj);
        }
        arr = test;
      } else if (value == 5 || value == 6) {
        for (const key in sourceData) {
          let item1 = sourceData[key];

          for (const key2 in item1) {
            let item2 = item1[key2];
            let cityName = key2.split("|")[1];
            let result = {
              name: cityName, // 地区
              code: key.split("|")[1], // 指标
            };
            for (const key3 in item2) {
              if (this.tableYears.indexOf(key3) < 0) {
                this.tableYears.push(key3);
              }
              result[key3] = item2[key3];
            }
            arr.push(result);
          }
        }
      }

      this.totalTableData = arr;
      this.tableData = arr.filter((item) => {
        return item.code == this.other;
      });
    },

    // 根据对照表获取城市中文名
    getCityName(code) {
      let result = {
        key: "",
        label: "",
      };
      // 城市对应表
      let regionArr = this.dataRegion[0].children;
      regionArr.forEach((item) => {
        if (code == item.code) {
          result.key = item.code;
          result.label = item.codename;
        }
      });
      return result;
    },
    selectHandle1: function (value) {
      this.statisticType = "18";
      this.statistic();
      //this.resetTable();
      //var that = this;
      //this.mainPositionWinShow = false;
      this.init();
    },

    selectHandle2: function (value) {
      let obj = {};
      obj = this.others.find((item) => {
        //遍历list的数据
        return item.key === value; //筛选出匹配数据
      });
      this.otherLabel = obj.label;

      this.resetTable();
      var that = this;
      that.tableData = that.totalTableData.filter((item) => {
        return that.other ? item.code == that.other : true;
      });
      setTimeout(() => {
        this.setSelect(this.tableDataArr);
      });
      this.drawLine();
      this.mainPositionWinShow = false;
    },
    resetTable() {
      // 重置表格信息
      this.checkedStat = [];
      this.calculationColums = [];
      this.tableSearch = [];
    },

    // 多选不选择，计算的部分
    setSelect(rows) {
      if (rows) {
        for (var i = 0; i < rows.length; i++) {
          if (this.calculationColums.indexOf(rows[i].name) < 0) {
            this.$refs.multipleTable.toggleRowSelection(rows[i]);
          }
        }
      }
    },
    handleSelectionChange(arr) {
      // var that = this;
      this.multipleSelection = arr;
      if (this.chartType == "pie" && arr.length > 1) {
        this.$refs["multipleTable"].clearSelection();
        this.$refs["multipleTable"].toggleRowSelection(arr[arr.length - 1]);
      }
      this.drawLine();
    },

    // 生成预测和分析需要的，参数，该参数用于接口
    // j结构 key ：指标，value：2018:222

    setAnalysisParamas() {
      var ajaxData = {};
      // let that = this;
      let tableData = this.tableData;
      // let other = this.other;
      let value = this.value;
      let years = this.tableYears;

      if (["1", "2", "5", "6"].indexOf(value) >= 0) {
        tableData.forEach((item) => {
          for (let key in item) {
            let obj = {};
            obj[key] = !!String(item[key]) ? item[key] : "NULL";
            if (years.indexOf(key) >= 0) {
              if (ajaxData[item.name]) {
                ajaxData[item.name].push(obj);
              } else {
                ajaxData[item.name] = [obj];
              }
            }
          }
        });
      } else if (["3", "4"].indexOf(value) >= 0) {
        this.$message.error("第三维度是时间时，不可预测或分析");
        return "";
      }
      // 倒叙
      for (let key in ajaxData) {
        ajaxData[key] = ajaxData[key].reverse();
      }
      return ajaxData;
    },
    // 开始预测  数据结构变了
    preBegin() {
      this.resetTable();
      var that = this;
      this.tableSearch = []; // 重置

      that.predictWin = false;
      var url = that.holtPath[this.preNameVal];
      let obj = this.setAnalysisParamas();
      if (!obj) return;
      // 参数获取
      let ajaxData = {
        num: that.preVal,
        ...obj,
      };

      // this.$axios
      // .post("http://117.107.199.85:5300" + url, ajaxData)
      const loading = this.$loading({
        lock: true,
        text: "正在预测...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$axios
        .request({
          url: "5300" + url,
          method: "post",
          data: ajaxData,
        })
        .then(function (res) {
          that.trNum = "trNum" + that.preVal;
          var resMap = res.data;
          var searchArr = [];
          let tableData = that.tableData;
          if ([1, 2, 5, 6].indexOf(Number(that.value)) >= 0) {
            for (var i = 0; i < tableData.length; i++) {
              var item = tableData[i];
              var addData = resMap[item.name];
              for (var j = 0; j < addData.length; j++) {
                for (var k in addData[j]) {
                  if (!/期/.test(k)) {
                    continue;
                  }
                  var finalData = addData[j];
                  if (searchArr.indexOf(k) < 0) {
                    searchArr.push(k);
                  }
                  item[k] = finalData[k];
                }
              }
            }
          }
          that.tableData = Object.assign([], tableData);
          that.$nextTick(() => {
            that.setSelect(that.tableDataArr);
          });

          that.tableSearch = Object.assign([], searchArr);
        })
        .catch(function (error) {
          console.log(error);
        })
        .finally(() => {
          loading.close();
        });
    },
    staBegin() {
      var that = this;
      var selectedName = this.checkedStat;
      this.calculationColums = Object.assign([], selectedName);
      selectedName.forEach((key) => {
        this.setDataValues(key);
      });
      this.statisticalWin = false;

      setTimeout(function () {
        that.setSelect(that.tableDataArr);
      });
    },
    setDataValues(key) {
      // 求和值 等key的数组，计算的时候这写col不计算，需要排除
      let statNames = this.statNames.map((item) => {
        return item.label;
      });
      let years = this.tableYears;
      let tableSearch = this.tableSearch;
      let tableColumn = years.concat(tableSearch);
      let data = this.tableData;
      let result = [];
      data.forEach((item) => {
        let values = [];
        for (var k in item) {
          // 参与计算的列不包括statNames等计算值，且必须要在展示列中
          if (statNames.indexOf(k) < 0 && tableColumn.indexOf(k) >= 0) {
            if (!isNaN(Number(item[k]))) {
              // 排除非数字
              values.push(item[k]);
            }
          }
        }
        if (values.length) {
          switch (key) {
            case "求和值":
              item[key] = this.sum(values);
              break;
            case "求平均":
              item[key] = this.avg(values);
              break;
            case "最大值":
              item[key] = Math.max(...values);
              break;
            case "求最小值":
              item[key] = Math.min(...values);
              break;
            case "中位数":
              item[key] = this.findMedianSortedArrays(values);
              break;
            case "众数":
              item[key] = this.majorityElement(values);
              break;
            case "方差":
              item[key] = this.varianceArr(values);
              break;
            case "标准差":
              item[key] = this.stddevArr(values);
              break;
          }
          if (key !== "众数") {
            item[key] = parseFloat(item[key]).toFixed(2);
          }

          result.push(item);
        }
      });
      this.tableData = Object.assign([], result);
    },
    // 求和
    sum(arr) {
      return arr.reduce(function (prev, curr) {
        return Number(prev) + Number(curr);
      });
    },
    // 平均值
    avg(arr) {
      let value = arr.reduce(function (prev, curr) {
        return Number(prev) + Number(curr);
      });
      return value / arr.length;
    },
    // 中位数
    findMedianSortedArrays(arr) {
      arr.sort(function (a, b) {
        return a - b;
      });
      let mid = Math.floor(arr.length / 2);
      if (arr.length % 2 === 0) {
        return (Number(arr[mid - 1]) + Number(arr[mid])) / 2;
      } else {
        return arr[mid];
      }
    },
    // 众数
    majorityElement(arr) {
      let map = {};
      for (let i = 0; i < arr.length; i++) {
        if (map[arr[i]]) {
          let index = map[arr[i]] + 1;
          map[arr[i]] = index;
        } else {
          map[arr[i]] = 1;
        }
      }
      // 情况1;没有众数，所有出现的值出现的次数相等
      let valArr = Object.values(map);
      let bool = true;
      for (var i = 1, len = valArr.length; i < len; i++) {
        if (valArr[i] !== valArr[0]) {
          bool = false;
        }
      }
      // 没有众数
      if (bool) {
        return "";
      }

      // 有众数，判断取值
      let resMap = {};
      for (let k in map) {
        let value = map[k];
        if (resMap[value]) {
          resMap[value].push(k);
        } else {
          let list = [];
          list.push(k);
          resMap[value] = list;
        }
      }
      let keyList = [];
      for (let k in resMap) {
        keyList.push(k);
      }
      let result = resMap[Math.max(...keyList)];
      return result.join(",");
    },
    //方差
    varianceArr(arr) {
      let s,
        ave,
        sum = 0,
        sums = 0,
        len = arr.length;
      for (let i = 0; i < len; i++) {
        sum += Number(arr[i]);
      }
      ave = sum / len;
      for (let i = 0; i < len; i++) {
        sums += (Number(arr[i]) - ave) * (Number(arr[i]) - ave);
      }
      s = (sums / len).toFixed(4);
      return s;
    },

    // 标准差
    stddevArr(arr) {
      var sum = function (x, y) {
        return Number(x) + Number(y);
      }; //求和函数
      var square = function (x) {
        return Number(x) * Number(x);
      }; //数组中每个元素求它的平方
      var mean = arr.reduce(sum) / arr.length;
      var deviations = arr.map(function (x) {
        return x - mean;
      });
      var stddev = Math.sqrt(deviations.map(square).reduce(sum) / arr.length);
      return stddev;
    },
    // 开始分析
    anaBegin() {
      this.resetTable();
      var that = this;
      this.predictWin = false;
      var url = this.anaPath[this.anaVal];
      let ajaxData = this.setAnalysisParamas();
      if (!ajaxData) {
        that.analysisWin = false;
        return;
      }
      const loading = this.$loading({
        lock: true,
        text: "正在分析...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$axios
        .request({
          url: "5300" + url,
          method: "post",
          data: ajaxData,
        })
        .then(function (res) {
          that.analysisWin = false;
          that.anaDataShow = true;
          var html = "";
          switch (that.anaVal) {
            case "相关性分析":
              for (var k = 0; k < res.data.data.length; k++) {
                html += '<div class="anaXiang">';
                for (var i = 0; i < res.data.data[k].length; i++) {
                  html +=
                    '<span class="anaXiangSpan">' +
                    res.data.data[k][i] +
                    "</span>";
                }
                html += "</div>";
              }
              that.anaDataTitle = "相关性分析";
              that.anaDataCnt = true;
              break;

            case "主成分分析":
              for (var k = 0; k < res.data.data.length; k++) {
                html += '<div class="anaXiang">';
                for (var i = 0; i < res.data.data[k].length; i++) {
                  html +=
                    '<span class="anaXiangSpan">' +
                    res.data.data[k][i] +
                    "</span>";
                }
                html += "</div>";
              }
              that.anaDataTitle = "主成分分析";
              that.anaDataCnt = true;
              break;

            case "线性回归法":
              for (var k = 0; k < res.data.data.length; k++) {
                html += '<div class="anaXiang">';
                for (var i = 0; i < res.data.data[k].length; i++) {
                  html +=
                    '<span class="anaXiangSpan">' +
                    res.data.data[k][i] +
                    "</span>";
                }
                html += "</div>";
              }
              that.anaDataTitle = "线性回归法";
              that.anaDataCnt = true;
              break;

            case "描述性分析":
              for (var k in res.data) {
                html += '<div class="anaMiao">';
                html += '<p class="anaMiaoTitle">' + k + "</p>";
                for (var i = 0; i < res.data[k].length; i++) {
                  html +=
                    '<p class="anaMiaoSpan"><span>' +
                    res.data[k][i].split(":")[0] +
                    "</span><span>" +
                    res.data[k][i].split(":")[1] +
                    "</span></p>";
                }
                html += "</div>";
              }
              that.anaDataTitle = "描述性分析";
              that.anaDataCnt = true;
              break;

            default:
              break;
          }

          document.getElementById("anaData").innerHTML = html;
        })
        .finally(() => {
          loading.close();
        });
    },
    anaDataTitleBtn() {
      if (this.anaDataCnt == false) {
        this.anaDataCnt = true;
      } else {
        this.anaDataCnt = false;
      }
    },
    anaDataClose() {
      document.getElementById("anaData").innerHTML = "";
      this.anaDataShow = false;
    },
    preCancel() {
      this.predictWin = false;
    },
    staCancel() {
      this.statisticalWin = false;
    },
    anaCancel() {
      this.analysisWin = false;
    },
    predict() {
      this.predictWin = true;
      this.analysisWin = false;
      this.statisticalWin = false;

      this.cur = 0;
      this.graphShow = true;
      this.statementShow = true;
      this.statisticType = "9";
      this.statistic();
    },
    analysis() {
      this.analysisWin = true;
      this.predictWin = false;
      this.statisticalWin = false;
      this.cur = 0;
      this.graphShow = true;
      this.statementShow = true;
      this.statisticType = "8";
      this.statistic();
    },
    statistical() {
      this.statisticalWin = true;
      this.predictWin = false;
      this.analysisWin = false;

      this.cur = 0;
      this.graphShow = true;
      this.statementShow = true;
      this.statisticType = "10";
      this.statistic();
    },

    handleClick(tab, event) { },
    getNavData(list, parentId) {
      if (!parentId) {
        parentId = 0;
      }
      let result = [];
      for (var i = 0; i < list.length; i++) {
        if (list[i].parenid == parentId) {
          list[i].label = list[i].fullname;
          list[i].children = this.getNavData(list, list[i].id);
          list[i].codes = list[i].timeTypeCode
            ? list[i].code + "_" + list[i].timeTypeCode
            : "id_" + list[i].id;
          result.push(list[i]);
        }
      }
      return result;
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label ? data.label.indexOf(value) !== -1 : false;
    },
    filterNodeRegion(value, dataRegion) {
      if (!value) return true;
      return dataRegion.codename
        ? dataRegion.codename.indexOf(value) !== -1
        : false;
    },

    filterNodeTime(value, dataTime, node) {
      if (!value) return true;
      return dataTime.label ? value.indexOf(dataTime.label) !== -1 : false;
    },
    formatter(row, column) {
      return row.address;
    },

    drawLine() {
      var that = this;
      var tableLegend = [];
      var seriesMap = {};
      var series = [];
      var legend = [];
      let value = this.value;
      // multipleSelection 会随着 table展示值的变化而变化
      let colArr = that.tableSearch.concat(that.tableYears); // 需要在图表中展示的列
      colArr.reverse()
      if ([1, 3, 6].indexOf(Number(this.value)) >= 0) {
        for (var i = 0; i < this.multipleSelection.length; i++) {
          var item = {
            name: this.multipleSelection[i].name,
            type: that.chartType,
            data: [],
          };
          for (var j = 0; j < colArr.length; j++) {
            item.data.push(this.multipleSelection[i][colArr[j]]);
          }
          if (this.chartStack) {
            item.stack = "总量";
            item.areaStyle = {};
          }
          series.push(item);
        }
        legend = colArr;
        if (this.chartType == "pie" && series.length > 0) {
          if (this.value == 1) {
            series = [series[0]];
            for (var i = 0; i < series[0].data.length; i++) {
              var itemData = {};
              itemData.name = legend[i];
              itemData.value = series[0].data[i];
              series[0].data[i] = itemData;
            }
          } else {
            let tmpSeries = [
              {
                name: series[0].data[0].name,
                type: series[0].type,
                data: [],
              },
            ];
            for (var i = 0; i < series.length; i++) {
              var itemData = {};
              itemData.name = series[i].name;
              itemData.value = series[i].data[0];
              tmpSeries[0].data[i] = itemData;
            }
            series = tmpSeries;
          }
        }
      } else {
        if (this.multipleSelection.length) {
          this.multipleSelection.forEach((item) => {
            let data = {
              name: item.name,
              type: that.chartType,
              data: [],
            };
            for (const key in item) {
              // 饼图
              if (this.tableColumn.indexOf(key) >= 0) {
                if (this.chartType == "pie") {
                  data.data.push({
                    name: key,
                    value: item[key],
                  });
                } else {
                  data.data.push(item[key]);
                }
              }
            }
            series.push(data);
          });
        }
        legend = this.tableColumn;
      }
      that.series = series;
      that.tableLegend = legend;

      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("myChart"));

      var rowXAxis = [
        {
          type: "category",
          data: legend,
          axisLabel: {
            fontSize: 12,
            interval: 0,
            rotate: -40,
            formatter: function (value) {
              var ret = ""; //拼接加\n返回的类目项
              var maxLength = 6; //每项显示文字个数
              var valLength = value.length; //X轴类目项的文字个数
              var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
              if (rowN > 1) {
                //如果类目项的文字大于3,
                for (var i = 0; i < rowN; i++) {
                  var temp = ""; //每次截取的字符串
                  var start = i * maxLength; //开始截取的位置
                  var end = start + maxLength; //结束截取的位置
                  //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                  temp = value.substring(start, end) + "\n";
                  ret += temp; //凭借最终的字符串
                }
                return ret;
              } else {
                return value;
              }
            },
            textStyle: {
              //改变刻度字体样式
              color: "#fff",
            },
          },
        },
      ];
      var rowYAxis = [
        {
          type: "value",
          axisLabel: {
            fontSize: 12,
            textStyle: {
              //改变刻度字体样式
              color: "#fff",
            },
          },
        },
      ];
      var chartOption = {
        title: {},
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        toolbox: {
          show: false,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        series: series,
      };
      if (this.chartType != "pie") {
        chartOption.xAxis = this.chartDirection == "row" ? rowXAxis : rowYAxis;
        chartOption.yAxis = this.chartDirection == "row" ? rowYAxis : rowXAxis;
        chartOption.tooltip = {
          trigger: "axis",
        };
      }
      // 绘制图表
      myChart.setOption(chartOption, true);
    },

    zhuzhuang() {
      this.statisticType = "13";
      this.statistic();
      this.changeOn = 0;
      this.chartType = "bar";
      this.chartDirection = "row";
      this.chartStack = false;
      this.drawLine();
      this.$refs.multipleTable.clearSelection();
      this.setSelect(this.tableDataArr);
    },
    hengtiao() {
      this.statisticType = "14";
      this.statistic();
      this.changeOn = 1;
      this.chartType = "bar";
      this.chartDirection = "column";
      this.chartStack = false;
      this.drawLine();
      this.$refs.multipleTable.clearSelection();
      this.setSelect(this.tableDataArr);
    },
    line() {
      this.statisticType = "15";
      this.statistic();
      this.changeOn = 2;
      this.chartType = "line";
      this.chartDirection = "row";
      this.chartStack = false;
      this.drawLine();
      this.$refs.multipleTable.clearSelection();
      this.setSelect(this.tableDataArr);
    },
    duidie() {
      this.statisticType = "16";
      this.statistic();
      this.changeOn = 3;
      this.chartType = "line";
      this.chartDirection = "row";
      this.chartStack = true;
      this.drawLine();
      this.$refs.multipleTable.clearSelection();
      this.setSelect(this.tableDataArr);
    },
    bing(rows, arr) {
      this.statisticType = "17";
      this.statistic();
      this.changeOn = 4;
      this.chartType = "pie";
      this.chartDirection = "row";
      this.chartStack = false;
      this.drawLine();
      //清空勾选值
      var row =
        this.multipleSelection.length > 0
          ? this.multipleSelection[0]
          : this.tableData[0];
      this.$refs.multipleTable.clearSelection();
      if (rows) {
        rows.forEach((row, index) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.toggleRowSelection(row);
      }
    },
    statement() {
      var that = this;
      this.cur = 1;
      this.statementShow = true;
      this.graphShow = false;
      that.tableSearch = [];
      that.trNum = "";
      this.statisticType = "6";
      this.statistic();
    },
    graph() {
      this.cur = 2;
      this.graphShow = true;
      this.statementShow = false;
      this.statisticType = "7";
      this.statistic();
    },
    stateGraph() {
      var that = this;
      that.tableSearch = [];
      that.trNum = "";
      this.cur = 0;
      this.graphShow = true;
      this.statementShow = true;
      this.statisticType = "5";
      this.statistic();
    },
    nodeClickHandle(data) {
      var checkedKeys = this.$refs.tree.getCheckedKeys();
      if (!data.children || data.children.length == 0) {
        for (var i = 0; i < this.data.length; i++) {
          var data1 = this.data[i];
          if (data1.children && data1.children.length) {
            if (checkedKeys.indexOf(data1.codes) >= 0) {
              checkedKeys.splice(checkedKeys.indexOf(data1.codes), 1);
            }
            for (var j = 0; j < data1.children.length; j++) {
              var data2 = data1.children[j];
              if (data2.children && data2.children.length) {
                if (checkedKeys.indexOf(data2.codes) >= 0) {
                  checkedKeys.splice(checkedKeys.indexOf(data2.codes), 1);
                }
              }
            }
          }
        }
        var idx = checkedKeys.indexOf(data.codes);
        if (idx < 0) {
          checkedKeys.push(data.codes);
        } else {
          checkedKeys.splice(idx, 1);
        }
        this.$refs.tree.setCheckedKeys(checkedKeys);
      }
    },
    checkChangeHandle(data, nodeCheck, childCheck, defaultCheckedKeys) {
      var that = this;
      var checkedKeys = defaultCheckedKeys || this.$refs.tree.getCheckedKeys();
      var getIndexs = [];
      for (var i = 0; i < this.data.length; i++) {
        var data1 = this.data[i];
        if (data1.children && data1.children.length) {
          if (checkedKeys.indexOf(data1.codes) >= 0) {
            checkedKeys.splice(checkedKeys.indexOf(data1.codes), 1);
          }
          for (var j = 0; j < data1.children.length; j++) {
            var data2 = data1.children[j];
            if (data2.children && data2.children.length) {
              if (checkedKeys.indexOf(data2.codes) >= 0) {
                checkedKeys.splice(checkedKeys.indexOf(data2.codes), 1);
              }
              for (var k = 0; k < data2.children.length; k++) {
                var data3 = data2.children[k];
                // 有的匹配code
                if (
                  checkedKeys.indexOf(data3.codes) >= 0 ||
                  checkedKeys.indexOf(data3.code) >= 0
                ) {
                  // 如果匹配的是 code 用codes替换一下
                  if (checkedKeys.indexOf(data3.code) >= 0) {
                    checkedKeys.splice(
                      checkedKeys.indexOf(data3.code),
                      1,
                      data3.codes
                    );
                  }
                  getIndexs.push({
                    // label: data3.name,
                    label: data3.fullname,
                    key: data3.codes,
                  });
                }
              }
              // debugger
            } else if (checkedKeys.indexOf(data2.codes) >= 0) {
              getIndexs.push({
                // label: data2.name,
                label: data2.fullname,
                key: data2.codes,
              });
            }
          }
        } else if (checkedKeys.indexOf(data1.codes) >= 0) {
          getIndexs.push({
            // label: data1.name,
            label: data1.fullname,
            key: data1.codes,
          });
        }
      }

      this.mainPositionWinShow = true;
      this.getIndex = checkedKeys;
      this.getIndexs = getIndexs;
      if (defaultCheckedKeys) {
        this.$refs.tree.setCheckedKeys(this.getIndex);
      }
    },
    // 提取数据的适合，如果不勾选，都是空值的话，就默认选择指标+地区+时间的前五项
    getDefualtMenu(methodName) {
      let fn = (arr, pushKey) => {
        let result = [];
        function recursiveGetData(data) {
          for (const item of data) {
            if (result.length >= 5) {
              return;
            }
            if (item.children && item.children.length > 0) {
              recursiveGetData(item.children);
            } else {
              result.push(item[pushKey]);
            }
          }
        }
        recursiveGetData(arr)
        return result;
      };
      let obj = {
        getIndex: () => {
          return fn(this.data, "codes");
        },
        getRegion: () => {
          return fn(this.dataRegion, "code");
        },
        getTime: () => {
          return fn(this.dataTime, "id");
        },
      };
      return obj[methodName]();
    },
    checkChangeHandleRegion(data, nodeCheck, childCheck, defaultCheckedKeys) {
      // 隐藏这个节点的时候返回
      if (!this.isVisibleAreaTab) {
        return;
      }
      var that = this;
      if (this.isVisibleAreaTab) {
        var checkedKeys =
          defaultCheckedKeys || this.$refs.treeRegion.getCheckedKeys();
      } else {
        var checkedKeys = defaultCheckedKeys || [];
      }

      var getRegions = [];
      for (var i = 0; i < this.dataRegion.length; i++) {
        var data1 = this.dataRegion[i];
        //data1
        if (data1.children && data1.children.length) {
          if (checkedKeys.indexOf(data1.code) >= 0) {
            checkedKeys.splice(checkedKeys.indexOf(data1.code), 1);
          }
          for (var j = 0; j < data1.children.length; j++) {
            var data2 = data1.children[j];
            //data2
            if (data2.children && data2.children.length) {
              if (checkedKeys.indexOf(data2.code) >= 0) {
                checkedKeys.splice(checkedKeys.indexOf(data2.code), 1);
              }
              for (var k = 0; k < data2.children.length; k++) {
                var data3 = data2.children[k];
                //data3
                // if (checkedKeys.indexOf(data3.code) >= 0) {
                //   getRegions.push({
                //     label: data3.codename,
                //     key: data3.code,
                //   });
                // }
                if (data3.children && data3.children.length) {
                  if (checkedKeys.indexOf(data3.code) >= 0) {
                    checkedKeys.splice(checkedKeys.indexOf(data3.code), 1);
                  }
                  for (var o = 0; o < data3.children.length; o++) {
                    var data4 = data3.children[o];
                    //data4
                    if (checkedKeys.indexOf(data4.code) >= 0) {
                      getRegions.push({
                        label: data4.codename,
                        key: data4.code,
                      });
                    }
                  }
                } else if (checkedKeys.indexOf(data3.code) >= 0) {
                  getRegions.push({
                    label: data3.codename,
                    key: data3.code,
                  });
                }
              }
            } else if (checkedKeys.indexOf(data2.code) >= 0) {
              getRegions.push({
                label: data2.codename,
                key: data2.code,
              });
            }
          }
        } else if (checkedKeys.indexOf(data1.code) >= 0) {
          getRegions.push({
            label: data1.codename,
            key: data1.code,
          });
        }
      }
      this.mainPositionWinShow = true;
      this.getRegion = checkedKeys;
      getRegions.sort((a, b) => {
        return Number(a.key) - Number(b.key);
      });
      this.getRegions = getRegions;
      if (defaultCheckedKeys) {
        if (this.isVisibleAreaTab)
          this.$refs.treeRegion.setCheckedKeys(this.getRegion);
      }
      let getIndexLength = this.getIndex.length;
      let getRegionLength = this.getRegion.length;
      let getTimeLength = this.getTime.length;
      if (
        !defaultCheckedKeys &&
        getRegionLength == 1 &&
        getIndexLength == 0 &&
        getTimeLength == 0
      ) {
        let getIndex = [];
        for (var i = 0; i < 5; i++) {
          if (this.data[0].children[0].children.length > i) {
            getIndex.push(this.data[0].children[0].children[i].codes);
          }
        }
        //this.checkChangeHandle(null, null, null, getIndex);
      }
      if (
        !defaultCheckedKeys &&
        getRegionLength == 1 &&
        getIndexLength == 0 &&
        getTimeLength == 0
      ) {
        let getTime = [];
        for (var i = 0; i < 5; i++) {
          if (this.dataTime[0].children.length > i) {
            getTime.push(this.dataTime[0].children[i].id);
          }
        }
        //this.checkChangeHandleTime(null, null, null, getTime);
      }
    },

    nodeClickHandleRegion(data) {
      this.mainPositionWinShow = true;
    },
    nodeClickHandleTime(data) {
      this.mainPositionWinShow = true;
    },
    checkChangeHandleTime(data, nodeCheck, childCheck, defaultCheckedKeys) {
      var that = this;
      var checkedKeys =
        defaultCheckedKeys || this.$refs.treeTime.getCheckedKeys();
      var getTimes = [];
      for (var i = 0; i < this.dataTime.length; i++) {
        var data1 = this.dataTime[i];
        if (data1.children && data1.children.length) {
          if (checkedKeys.indexOf(data1.id) >= 0) {
            checkedKeys.splice(checkedKeys.indexOf(data1.id), 1);
          }
          for (var j = 0; j < data1.children.length; j++) {
            var data2 = data1.children[j];
            if (data2.children && data2.children.length) {
              if (checkedKeys.indexOf(data2.id) >= 0) {
                checkedKeys.splice(checkedKeys.indexOf(data2.id), 1);
              }
              for (var k = 0; k < data2.children.length; k++) {
                var data3 = data2.children[k];
                if (checkedKeys.indexOf(data3.id) >= 0) {
                  getTimes.push({
                    label: data3.label,
                    key: data3.id,
                  });
                }
              }
            } else if (checkedKeys.indexOf(data2.id) >= 0) {
              getTimes.push({
                label: data2.label,
                key: data2.id,
              });
            }
          }
        } else if (checkedKeys.indexOf(data1.id) >= 0) {
          getTimes.push({
            label: data1.label,
            key: data1.id,
          });
        }
      }
      this.mainPositionWinShow = true;
      this.getTime = checkedKeys;

      this.getTimes = getTimes;
      if (defaultCheckedKeys) {
        this.$refs.treeTime.setCheckedKeys(this.getTime);
      }
      let getIndexLength = this.getIndex.length;
      let getRegionLength = this.getRegion.length;
      let getTimeLength = this.getTime.length;
      if (
        !defaultCheckedKeys &&
        getTimeLength == 1 &&
        getIndexLength == 0 &&
        getRegionLength == 0
      ) {
        let getIndex = [];
        for (var i = 0; i < 5; i++) {
          if (this.data[0].children[0].children.length > i) {
            getIndex.push(this.data[0].children[0].children[i].codes);
          }
        }
        //this.checkChangeHandle(null, null, null, getIndex);
      }
      if (
        !defaultCheckedKeys &&
        getTimeLength == 1 &&
        getIndexLength == 0 &&
        getRegionLength == 0
      ) {
        let getRegion = [];
        for (var i = 0; i < 5; i++) {
          if (this.dataRegion[0].children.length > i) {
            getRegion.push(this.dataRegion[0].children[i].code);
          }
        }
        //this.checkChangeHandleRegion(null, null, null, getRegion);
      }
    },

    handleCheckedStatChange() { },
    handleCheckedGetIndexChange() {
      this.$refs.tree.setCheckedKeys(this.getIndex);
    },
    handleCheckedGetTimeChange() {
      this.$refs.treeTime.setCheckedKeys(this.getTime);
    },
    handleCheckedGetRegionChange() {
      if (this.isVisibleAreaTab)
        this.$refs.treeRegion.setCheckedKeys(this.getRegion);
    },
    changeTableSort() {
      this.drawLine();
    },
    conditionsClear() {
      this.getIndex = [];
      this.getIndexs = [];
      this.$refs.tree.setCheckedKeys([]);
      this.getTime = [];
      this.getTimes = [];
      this.$refs.treeTime.setCheckedKeys([]);
      this.getRegion = [];
      this.getRegions = [];
      if (this.isVisibleAreaTab) this.$refs.treeRegion.setCheckedKeys([]);
    },
    conditionsClose() {
      this.mainPositionWinShow = false;
      this.conditionsClear();
      this.termlook();
      setTimeout(() => {
        this.mainPositionWinShow = false;
      });
    },
    downloadImpByChart() {
      let isexport = this.userInfo.exporttype
      if (!isexport) {
        this.$message({
          message: '试用账号，无此权限！请联系管理员！',
          type: 'warning',
          showClose: true,
          duration: 3000,
          center: true
        });
        return
      }
      this.statisticType = "12";
      this.statistic();
      this.picName = $(".excelName").html();
      // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等

      window.pageYOffset = 0;
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
      var this1 = this;
      setTimeout(function () {
        html2canvas(this1.$refs.imageWrapper, {
          backgroundColor: null,
          useCORS: true,
        }).then((canvas) => {
          let dataURL = canvas.toDataURL("image/png");
          this1.downImg = dataURL;
          setTimeout(function () {
            var el = document.getElementById("downImg");
            el.click();
          }, 2000);
        });
      }, 500);
    },

    output() {
      let { exporttype, username, exportRestrictions } = this.userInfo
      if (!exporttype && !exportRestrictions) {
        this.$message({
          message: '试用账号，无此权限！请联系管理员！',
          type: 'warning',
          showClose: true,
          duration: 3000,
          center: true
        });
        return
      }
      if (exporttype && exportRestrictions) { 
        // 传递给导出表格
        let Controlcol = this.ReservedBar(this.tableDataArr)
        this.ExportTable = Controlcol;
        // 查看权限下的导出条数
        this.$axios.request({
          url: "5100/user/exportRestrictions",
          method: "get",
          params: {
            exportNumber: 0,
            userName: username
          },
        }).then(res => {
          let Rpieces = res.data
          if (Rpieces == 0) {
            this.$message({
              message: '试用账号，导出已达上限！',
              type: 'warning',
              showClose: true,
              duration: 3000,
              center: true
            });
            return
          } else {
            // 拷贝原有数据
            let original = JSON.parse(JSON.stringify(this.tableDataArr));
            if (this.ExportTable.length > Rpieces) {
              let extract = this.ExportTable.slice(0, Rpieces);
              this.ExportTable = extract
              this.$nextTick(() => {
                this.QuickPass()
                this.Exportsuccess(Rpieces, username)
              })
            } else {
              this.$nextTick(() => {
                this.QuickPass()
                this.Exportsuccess(this.ExportTable.length, username)
              })
            }
            // 还原原有数据
            setTimeout(() => {
              this.ExportTable = original
            })
          }
        })
      } else {
        this.statisticType = "3";
        this.statistic();
        var excelName = $(".excelName").html();
        var addFooterHtml =
          '<tr class="tableNone"></tr><tr class="tableNone"></tr><tr class="tableNone"></tr><tr class="tableNone"></tr><tr class="tableNone"></tr><tr class="tableNone"><td></td><td>数据来源：数据圈</td></tr><tr class="tableNone"><td></td><td>联系人：刘老师</td></tr><tr class="tableNone"><td></td><td>电&nbsp;&nbsp;话：18810308405</td></tr><tr class="tableNone"><td></td><td>E-mail：shicong.liu@shujuquan.com</td></tr>';
        var addHeaderHtml = '<tr class="tableNone"><td></td><td>' + this.otherLabel + '</td></tr><tr class="tableNone"></tr><tr class="tableNone"></tr>';
        $("#mytable").find(".el-table__fixed-header-wrapper").find("thead").prepend(addHeaderHtml);
        $("#mytable").find(".el-table__fixed-body-wrapper").find("tbody").append(addFooterHtml);

        var fix = document.querySelector("#mytable .el-table__fixed");
        var wb;
        if (fix) {
          wb = XLSX.utils.table_to_book(
            document.querySelector("#mytable").removeChild(fix)
          );
          document.querySelector("#mytable").appendChild(fix);
          $(".tableNone").remove();
        } else {
          wb = XLSX.utils.table_to_book(document.querySelector("#mytable"));
        }
        /* get binary string as output */
        var wbout = XLSX.write(wb, {
          bookType: "xlsx",
          bookSST: true,
          type: "array",
        });
        let date = new Date();
        date = `${date.getFullYear()}${date.getMonth() + 1}${date.getDate()}`;
        try {
          FileSaver.saveAs(
            new Blob([wbout], { type: "application/octet-stream" }),
            `` + excelName + `${date}.xlsx`
          );
        } catch (e) {
          if (typeof console !== "undefined") console.log(e, wbout);
        }
        return wbout;
      }
    },

    // 横向保留20条
    ReservedBar(arr) {
      return arr.map(obj => {
        let newObj = new Map();
        let count = 0;
        let keys = Object.keys(obj).reverse();
        for (let key of keys) {
          if (key === "name") {
            newObj.set(key, obj[key]);
          } else if (key === "code") {
            continue;
          } else if (count < 19) {
            newObj.set(key, obj[key]);
            count++;
          } else {
            newObj.set(key, "");
          }
        }
        return Object.fromEntries(newObj);
      });
    },

    // 快速导出
    QuickPass() {
      this.statisticType = "3";
      this.statistic();
      var excelName = $(".excelName").html();
      var addFooterHtml =
        '<tr class="tableNone"></tr><tr class="tableNone"></tr><tr class="tableNone"></tr><tr class="tableNone"></tr><tr class="tableNone"></tr><tr class="tableNone"><td></td><td>数据来源：数据圈</td></tr><tr class="tableNone"><td></td><td>联系人：刘老师</td></tr><tr class="tableNone"><td></td><td>电&nbsp;&nbsp;话：18810308405</td></tr><tr class="tableNone"><td></td><td>E-mail：shicong.liu@shujuquan.com</td></tr>';
      var addHeaderHtml = '<tr class="tableNone"><td></td><td>' + this.otherLabel + '</td></tr><tr class="tableNone"></tr><tr class="tableNone"></tr>';
      $("#tableDetailData").find(".el-table__fixed-header-wrapper").find("thead").prepend(addHeaderHtml);
      $("#tableDetailData").find(".el-table__fixed-body-wrapper").find("tbody").append(addFooterHtml);

      var fix = document.querySelector("#tableDetailData .el-table__fixed");
      var wb;
      if (fix) {
        wb = XLSX.utils.table_to_book(
          document.querySelector("#tableDetailData").removeChild(fix)
        );
        document.querySelector("#tableDetailData").appendChild(fix);
        $(".tableNone").remove();
      } else {
        wb = XLSX.utils.table_to_book(document.querySelector("#tableDetailData"));
      }
      /* get binary string as output */
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      let date = new Date();
      date = `${date.getFullYear()}${date.getMonth() + 1}${date.getDate()}`;
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          `` + excelName + `${date}.xlsx`
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },

    // 导出成功
    Exportsuccess(value, user) {
      this.$axios.request({
        url: "5100/user/exportRestrictions",
        method: "get",
        params: {
          exportNumber: value,
          userName: user
        },
      }).then(res => {
        return res.data
      })
    },

    toImgPrint() { // 转图片打印
      html2canvas(document.querySelector("#app"), {
        backgroundColor: '#25262E',
        useCORS: true,
        windowHeight: document.body.scrollHeight

      }).then((canvas) => {

        // let url = canvas.toDataURL('image/jpeg', 1.0)
        const url = canvas.toDataURL()
        this.img = url

        printJS({
          printable: url,
          type: 'image',
          documentTitle: '打印图片'
        })

      })
    },
    print() {
      let isexport = this.userInfo.exporttype
      if (!isexport) {
        this.$message({
          message: '试用账号，无此权限！请联系管理员！',
          type: 'warning',
          showClose: true,
          duration: 3000,
          center: true
        });
        return
      }
      this.statisticType = "11";
      this.statistic();
      const loading = this.$loading({
        lock: true,
        text: "正在打印...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.toImgPrint();
      loading.close();
    },
    filterTextClear() {
      this.filterText = "";
    },
    filterTextRegionClear() {
      this.filterTextRegion = "";
    },
    filterTextTimeClear() {
      this.filterTextTime = "";
    },
  }
};
</script>

<style lang="less" scoped>
.tree {
  overflow-y: auto;
  overflow-x: auto;
  /* width: 80px; */
  height: 800px;
}

/deep/ .el-tabs__item {
  width: 33.3% !important;
}

/deep/ .table-l {
  position: relative;
}

/deep/ .el-table__body-wrapper {
  border-top: 0 !important;
}

/deep/ .chartChangeSelect .el-select .el-input__inner {
  position: relative;
  left: -40px;
  width: 150%;
}

/deep/ .el-table__fixed-right::before,
.el-table__fixed::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #1f2027;
  z-index: 4;
}

.timeSelect {
  width: 64%;
  color: rgb(255, 255, 255);
  background: #25262e;
  height: 30px;
  line-height: 30px;
  padding-left: 10%;
}

.inputBlack input {
  background: #fff;
  color: #000;
}

.indexCodePopBox {
  .predictWin {
    top: 15%;
  }

  .indexCodePop {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  ul {
    background: #25262e;
    box-shadow: #000;
    max-height: 610px;
    overflow-x: scroll;
    li {
      display: flex;

      div {
        flex: 1;
        padding: 10px;
      }

      div:first-child {
        border-right: 1px solid #4b4c53;
      }
    }

    li:not(:last-child) {
      border-bottom: 1px solid #4b4c53;
    }
  }
}

.mainMap {
  position: relative;

  .mapYears {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);

    .mapIcon1 {
      position: absolute;
      right: 2px;
      top: -17px;
      width: 18px;
      padding: 0 10px;
    }

    .mapIcon2 {
      position: absolute;
      right: 2px;
      bottom: -17px;
      width: 18px;
      padding: 0 10px;
    }

    ul {
      li {
        position: relative;
        height: 60px;
        display: flex;
        align-items: center;
        padding-right: 30px;

        .mapIcon {
          width: 20px;
          height: 20px;
          margin-left: 10px;
          z-index: 99;
          position: absolute;
          right: 0;
          background: #25262e;
          padding: 5px 0;
        }

        .mapIconActive {
          width: 26px;
          height: 26px;
          right: -3px;
        }

        .mapYears-line {
          position: absolute;
          right: 10px;
          width: 1px;
          height: 100%;
          background: #fff;
          top: 0px;
          z-index: 88;
        }
      }
    }
  }
}
</style>